<template>
  <div class="saleTotal-container">
    <div class="infos">
      <div class="infos-content">
        <h5>深耕班</h5>
        <van-tabs v-model="active" animated  @click="tabsMethod">
          <van-tab v-for="(item,index) in dataList" :key="index" :title="item.name" :name="item.kc_id">
            <div style="margin-top:0.2rem;">
              <van-grid :column-num="3">
                <van-grid-item>
                  <div class="number">{{detail?detail.todaydata:0}}</div>
                  <div class="text">今日新增</div>
                </van-grid-item>
                <van-grid-item>
                  <div class="number">{{detail?detail.yesterdaydata:0}}</div>
                  <div class="text">昨日</div>
                </van-grid-item>
                <van-grid-item>
                  <div class="number">{{detail?detail.weekdata:0}}</div>
                  <div class="text">本周</div>
                </van-grid-item>
              </van-grid>
              <van-grid :column-num="3">
                <van-grid-item>
                  <div class="number">{{detail?detail.monthdata:0}}</div>
                  <div class="text">本月</div>
                </van-grid-item>
                <van-grid-item>
                  <div class="number">{{detail?detail.yeardata:0}}</div>
                  <div class="text">本年</div>
                </van-grid-item>
                <van-grid-item>
                  <div class="number">{{selfdata}}</div>
                  <div class="text">自定义</div>
                </van-grid-item>
              </van-grid>
            </div>
          </van-tab>
        </van-tabs>
        <div class="search-box">
          <van-cell title="选择日期区间" :value="date" @click="showTime(1)" is-link arrow-direction="down"></van-cell>
          <van-button type="primary" size="mini" icon="replay" @click="resultMethod(1)"></van-button>
        </div>
      </div>
      <div class="infos-content" style="margin-top:0.2rem;">
        <h5>教子助手</h5>
        <van-tabs v-model="active1" animated   @click="tabsMethod1">
          <van-tab v-for="(item,index) in dataList1" :key="index" :title="item.name" :name="item.kc_id">
            {{JSON.string}}
            <div style="margin-top:10px;">
              <van-grid :column-num="3">
                <van-grid-item>
                  <div class="number">{{detail1?detail1.todaydata:0}}</div>
                  <div class="text">今日新增</div>
                </van-grid-item>
                <van-grid-item>
                  <div class="number">{{detail1?detail1.yesterdaydata:0}}</div>
                  <div class="text">昨日</div>
                </van-grid-item>
                <van-grid-item>
                  <div class="number">{{detail1?detail1.weekdata:0}}</div>
                  <div class="text">本周</div>
                </van-grid-item>
              </van-grid>
              <van-grid :column-num="3">
                <van-grid-item>
                  <div class="number">{{detail1?detail1.monthdata:0}}</div>
                  <div class="text">本月</div>
                </van-grid-item>
                <van-grid-item>
                  <div class="number">{{detail1?detail1.yeardata:0}}</div>
                  <div class="text">本年</div>
                </van-grid-item>
                <van-grid-item>
                  <div class="number">{{selfdata1}}</div>
                  <div class="text">自定义</div>
                </van-grid-item>
              </van-grid>
            </div>
          </van-tab>
        </van-tabs>
        <div class="search-box">
          <van-cell title="选择日期区间" :value="date1" @click="showTime(2)" is-link arrow-direction="down"></van-cell>
          <van-button type="primary" size="mini" icon="replay" @click="resultMethod(2)"></van-button>
        </div>
      </div>
    </div>
    <van-calendar :min-date="minDate" :max-date="maxDate" v-model="show" type="range" @confirm="onConfirm"></van-calendar>
  </div>
  </div>
</template>
  <script>
// import * as echarts from 'echarts';
import { Icon, Grid, GridItem, Cell, Calendar, Search, Switch, Tabs, Button,Tab} from 'vant';
import moment from 'moment';
export default {
  components: {
    [Icon.name]: Icon, [Grid.name]: Grid, [GridItem.name]: GridItem, [Cell.name]: Cell,
    [Calendar.name]: Calendar, [Search.name]: Search, [Switch.name]: Switch,
    [Tabs.name]: Tabs, [Button.name]: Button,[Tab.name]:Tab
  },
  data() {
    return {
      active: 0,
      active1: 0,
      show: false,
      minDate: new Date(new Date().getFullYear() - 2, 0, 1),
      maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
      date: '请选择',
      date1: '请选择',
      value: '',
      checked: false,
      loading: false,
      startTime: '',
      endTime: '',
      tabIndex: 0,
      height: 0, 
      listType:1,
      dataList: [],
      dataList1: [],
      detail1: [],
      detail: [],
      kc_id: '',
      listType: 1,
      selfdata: 0,
      selfdata1: 0,
      kcCulture:[],
      kcJz:[]
    };
  },

  created() {
    this.initAjaxMethod();
    this.id = this.$route.query.id;//作业id
  },
  methods: {
    initAjaxMethod() {
      const toast = this.$toast.loading("加载中...");

      this.$http
        .post(this.$API.SET_PEROFFICE_SALETOTALCLASS,{ kc_id:this.kc_id})
        .then((data) => {
          toast.clear();
          if (data.code == 1) {
            
            this.kcCulture=Array.isArray(data.kcmenu.kc_shengen)?data.kcmenu.kc_shengen:[];
            this.kcJz=Array.isArray(data.kcmenu.kc_jiaozi)?data.kcmenu.kc_jiaozi:[];

            this.dataList = Array.isArray(data.kcmenu.kc_shengen) ? data.kcmenu.kc_shengen : [];
            this.dataList1 = Array.isArray(data.kcmenu.kc_jiaozi) ? data.kcmenu.kc_jiaozi : [];                     
            this.detail=data.datadefaul1;
            this.detail1=data.datadefaul2;


          }
        });
    },

   // 点击课程切换
    initPagetab() {
      const toast = this.$toast.loading("加载中...");

      this.$http
        .post(this.$API.SET_PEROFFICE_SALETOTALCLASS,{ kc_id:this.kc_id})
        .then((data) => {
          toast.clear();
          console.log("qqq",this.listType);
          if (data.code == 1) { 
            if(this.listType == 1){
              this.detail=data.datareal;
              }else{
              this.detail1=data.datareal;
            }




          }
        });
    },





    tabsMethod(name,title){
      // console.log(name);
                if(this.kc_id!==name){
                    let currentIndex=0;
                    this.listType=1;
                    this.selfdata=0;
                    for(let i=0;i<this.dataList.length;i++){
                        if(this.dataList[i].kc_id == name){
                            currentIndex=i;
                            break;
                        }
                    }
                    this.tabIndex=currentIndex;
                    this.kc_id=name;
                    this.startTime='';
                    this.endTime='';
                    this.date='';
                    this.initPagetab();
                }
    },

       // jiaozi
       tabsMethod1(name,title){
                if(this.kc_id!==name){
                    let currentIndex=0;
                    this.listType=2;
                    this.selfdata1=0;
                    for(let i=0;i<this.dataList1.length;i++){
                        if(this.dataList1[i].kc_id == name){
                            currentIndex=i;
                            break;
                        }
                    }
                    this.tabIndex1=currentIndex;
                    this.kc_id=name;
                    this.startTime='';
                    this.endTime='';
                    this.date1='';
                    this.initPagetab();
                }

      },

    formatDate: (date) => moment(date).format("YYYY-MM-DD"),
    showTime(flag) {
      this.listType = flag;
      this.show = true;
    },
    onConfirm(date) {
      console.log(222);
      const [start, end] = date;
      this.show = false;

 
                if(this.listType == 1){
                    if(!this.kc_id){this.kc_id=this.dataList.length>0?this.dataList[0].kc_id:''}
                    this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
                }else{
                    if(!this.kc_id){this.kc_id=this.dataList1.length>0?this.dataList1[0].kc_id:''}
                    this.date1 = `${this.formatDate(start)} - ${this.formatDate(end)}`;
                }
                this.startTime=this.formatDate(start);
                this.endTime=this.formatDate(end);


      this.startTime = this.formatDate(start);
      this.endTime = this.formatDate(end);
      this.searchMethod();
    },
    // resultMethod(flag) {
    //   this.listType = flag;
    //   this.startTime = '';
    //   this.endTime = '';
    //   if (flag == 1) {
    //     this.selfdata = 0;
    //     this.date = '请选择';
    //   } else {
    //     this.selfdata1 = 0;
    //     this.date = '请选择';
    //   }
    // },

    resultMethod(flag){
                this.listType=flag;
                this.startTime='';
                this.endTime='';
                if(flag == 1){
                    this.selfdata=0;
                    this.date='请选择';
                }else{
                    this.selfdata1=0;
                    this.date='请选择';
                }
                this.searchMethod();
   },


    searchMethod() {
      const toast = this.$toast.loading("加载中...");
      console.log("sdfd",this.startTime);
      this.$http
        .post(this.$API.SET_PEROFFICE_SALETOTALCLASS, {
          // kc_id: this.listType == 1?this.kcCulture[this.active].kc_id:this.kcJz[this.active1].kc_id,
          kc_id:this.kc_id,
          sttime: this.startTime,
          edtime: this.endTime,
          selbytime:'byselfdy'
        })
        .then((data) => {
          toast.clear();
          if (data.code == 1) {
            if (this.listType == 1) {
              // this.selfdata = res.data;
              this.selfdata=data.datareal.selfdata;
            } else {
              // this.selfdata1 = data.data;
              this.selfdata1=data.datareal.selfdata;
            }
          }
        });
    }
  }
};
  </script>
  
  <style lang="less">
.saleTotal-container {
  .number{
    font-size: 0.44rem;
    font-weight: bold;
    color:#333;
  }
  .text{
    font-size:0.3rem;
    padding-top:0.08rem;
    color:#777;
  }
  .van-col {
    height: 0.72rem;
    line-height: 0.72rem;
    font-size:0.3rem;
    text-align: center;
  }
  .van-tab__text{
    font-size:0.3rem;
  }
  .van-row:nth-of-type(even) {
    background: #ccffff;
  }
  .infos {
    padding: 0.3rem 0.2rem 0.2rem 0.2rem;
  }
  .infos-content {
    background: #fff;
    padding: 8px;
    border-radius: 6px 6px 0 0;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  }
  .van-cell__title{
    font-size:0.3rem;
  }
  .van-cell__value{
    font-size: 0.3rem;
  }
  h5 {
    margin: 0;
    padding: 10px;
    font-weight: bold;
    font-size:0.32rem;
    color: #333;
  }
  .search-box {
    display: flex;
    align-items: center;
  }
}
</style>